<template>
	<div class="root">
		<!-- 标题 -->
		<div class="title">
			<div class="text">
				<p>商品分类</p>
			</div>
			<div class="search">
				<input type="search" placeholder="搜索" />
			</div>
		</div>
		<!-- 主题 -->
		<div class="main">
			<!-- 侧边导航 -->
			<div class="left_nav">
				<van-sidebar class="side_nav" v-model="activeKey">
					<van-sidebar-item class="side_nav_item" :title="item.name" v-for="(item,index) in goodsList" :key="item.id" @click="changeGoods(index)"/>
				</van-sidebar>
			</div>
			<!-- 右侧商品 -->
			<div class="right_goods">
				<!-- 轮播图 -->
				<div class="carousel">
					<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
						<van-swipe-item v-for="item in bannerList"><img :src="item.imgUrl" alt="" /></van-swipe-item>
					
					</van-swipe>
				</div>
				<!-- 商品 -->
				<div class="goods">
					<div class="goods_item_box" v-for="item in goods" :key="item.id" >
						<div class="goods_item_title">
							<p>{{item.name}}</p>
						</div>
						<div class="goods_item">
							<div class="goods_item_detail" v-for="i in item.goods" :key="i.id" @click="gotoDetail(i.id)">
								<div class="goods_img">
									<img :src="i.picture" alt="" />

								</div>
								<div class="goods_text">
									<span class="goods_title">{{i.name}}</span>
									<span class="goods_price">
										￥{{i.price}}
									</span>

								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 底部 -->
		<foot></foot>
	</div>
</template>

<script>
import {mapState,mapGetters}   from 'vuex'
	export default {
		name: 'classification',
		data() {
			return {
				activeKey: 0,
				goods:[]
				
			};
		},
		mounted(){
			this.getData()
			let timer=setInterval(()=>{
				if(this.goodsList){
					this.changeGoods(0)
					clearInterval(timer)
				}
			},100)
		},
		methods:{
			getData(){
				//获取所有商品数据
				this.$store.dispatch('classificationStore/goodsList')
				// 获取轮播图数据
				this.$store.dispatch('classificationStore/bannerList')
			},
			changeGoods(index){
				this.goods=this.goodsList[index].children
			},
			// 跳转商品详细页面
			gotoDetail(id){
				this.$router.push({
					name:'detail',
					query:{
						id
					}
				})
			}
		},
		computed:{
			...mapState('classificationStore',['goodsList','bannerList']),
			
		   
			
		}
	}
</script>

<style lang="scss">
	.root {
		width: 100%;
		height: 100%;
		display: flex;
		align-content: flex-start;
		background-color: white;

		// 标题
		.title {
			width: 100%;
			height: 10%;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;

			.text {
				width: 100%;
				height: 50%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				background-color: #F8F8F8;

				p {
					font-size: 35px;
					font-weight: bold;

					padding-left: 20px;
					color: black;
				}
			}

			.search {
				background-color: white;
				width: 100%;
				height: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

				input {
					width: 90%;
					height: 70%;
					border-radius: 30px;
					font-size: 25px;
					padding-left: 30px;
					border: none;
					outline: none;
					background-color: #F3F5F4;

				}
			}
		}

		// 主体
		.main {
			width: 100%;
			height: 84%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left_nav {
				width: 23%;
				height: 100%;
				background-color: #F7F8FA;

				.side_nav {
					width: 100%;
					height: 70%;
					display: flex;
					background-color: #F6F6F6;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;

				}

				.side_nav_item {
					width: 100%;
					height: 10%;
					margin-top: 10px;
					display: flex;
					justify-content: center;
					align-items: center;

				}

				.side_nav_item::after {
					content: '';
					bottom: 0;
					position: absolute;
					width: 60%;
					height: 2px;
					background-color: #E6E6E6;
				}


				.van-sidebar-item--select::before {
					background-color: #5AB596;
					height: 100%;
				}
			}

			.right_goods {

				overflow: scroll;
				background-color: #FEFEFE;
				width: 75%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;

				// 轮播图
				.carousel {
					width: 100%;
					height: 18%;

					display: flex;
					justify-content: center;
					align-items: center;

					.my-swipe {
						width: 95%;
						height: 95%;
						color: #fff;
						font-size: 20px;
						line-height: 100%;
						padding: 0;
						box-sizing: border-box;
						text-align: center;

						img {
							width: 100%;
							height: 100%;
						}

					}
				}

				// 商品
				.goods {
					width: 100%;
					height: 82%;

					.goods_item_box {
						width: 100%;
						padding-left: 20px;
						box-sizing: border-box;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						align-items: center;

						.goods_item_title {
							margin-bottom: 20px;
							width: 100%;
							height: 100px;
							border-bottom: 1px solid #E6E6E6;

							p {
								font-size: 30px;
								padding-left: 30px;
								letter-spacing: 2px;
							    
							}
							
						}
						

						.goods_item {
							width: 100%;
							display: flex;
							flex-wrap: wrap;
							justify-content: flex-start;
							align-items: center;
							box-sizing: border-box;

							.goods_item_detail {
								margin: 2px;
								margin-bottom: 10px;
								box-sizing: border-box;
								width: 32%;
								border-radius: 10px;
								height: 250px;
								background-color: #F7F7F7;
								display: flex;
								flex-wrap: wrap;
								justify-content: center;
								align-items: center;

								.goods_img {
									width: 100%;
									height: 70%;
									

									img {
										width: 100%;
										height: 100%;
									}
								}

								.goods_text {
									width: 100%;
									height: 30%;
									display: flex;
									flex-wrap: wrap;

									.goods_title {
										width: 100%;
										height: 40%;
										font-size: 22px;
										overflow: hidden;
										
									}

									.goods_price {
										width: 100%;
										height: 50%;
										font-size: 22px;
										color: #E9ADAF;
									}
								}
							}
						}

					}
				}
			}
		}
	}
</style>